<template>
  <!-- 运营管理-模板选择 -->
  <div class="ow_templateselect">
    <div class="content-popup">
      <el-tabs class="tabsControl" v-model="tabsObj.activeName" @tab-click="tabshandleClick">
        <el-tab-pane label="微官网模板" name="wechatOfficalTemplate">
          <span class="txt-top">仅支持移动端的适配，内容直接展示在“机构APP”的微官网模块中。</span>
          <div class="box-select scrollbarstyle">
            <div class="box-scroll">
              <div class="box-selectItem" v-for="(row,index) in phoneTemplateList" :key="index" :v-model="phoneTemplateList[index]">
                <div class="box-item">
                  <div class="imgPreColor" style="position: absolute;width: 2.75rem;pointer-events: none;
                    height: 4.24rem;background-color: rgba(0,0,0,0.5);z-index: 2;border-radius: 0.1rem;"></div>
                  <img class="backItem" :src="row.templateApplyFirstFigure" />
                  <div class="row" style="position:absolute;width:2.75rem;z-index: 3;">
                    <i v-if="row.isInUseOfCampus==1" class="ischeckIco el-icon-check" :style="userLevel==1?'visibility:hidden;':''"></i>
                    <i v-else class="ischeckIco el-icon-minus" :style="userLevel==1?'visibility:hidden;':''"></i>
                    <span class="statisticTxt">{{row.campusConutInUse||0}}校区在用</span>
                  </div>
                  <div class="row-edite" style="position:absolute;width:2.75rem;z-index: 3;">
                    <el-button type="primary" round @click="selectTemplate(row)">选择模板</el-button>
                    <!-- <el-button type="primary" round @click="editeTemplate">编辑模板</el-button> -->
                  </div>
                </div>
                <span v-show="!isediteTemplateName" class="templateName">
                  {{row.templateApplyName}}
                  <i v-show="userLevel==1" class="editeBtn el-icon-edit" @click="editeTemplateName"></i>
                </span>
                <span v-show="isediteTemplateName" class="templateName">
                  <el-input style="width:1.5rem;" size="mini" v-model="row.templateApplyName" placeholder="请输入名称"></el-input>
                   <el-button type="primary" size="mini" @click="saveTemplateName(row)">保存</el-button>
                </span>
                <span class="templateCreateTime">创建时间：{{row.createTime}}</span>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane disabled label="官网模板" name="officalTemplate">官网模板</el-tab-pane>
      </el-tabs>
    </div>
    <!-- 编辑模板 -->
    <el-dialog class="ow_templateeditePopup scrollbarstyle" :modal="false" :title="templateedite.title" :visible.sync="templateedite.visible">
      <owTemplateedite ref="ow_templateedite" :templateedite='templateedite.data'></owTemplateedite>
    </el-dialog>
  </div>
</template>

<script>
import owTemplateedite from './ow_templateedite'
export default {
  components:{owTemplateedite},
  props:['templateselect'],
  data() {
    return {
      parentData:this.templateselect,
      tabsObj:{
        activeName:'wechatOfficalTemplate'
      },
      phoneTemplateList:[
        // {
        //   templateId:'',
        //   templateName:'',
        //   templateFilePath:'',
        //   ramark:'',
        //   templateType:'',
        //   isUse:'',
        //   createUserId:'',
        //   createTime:'',
        //   updateUserId:'',
        //   updateTime:''
        // }
      ],
      /**模板编辑 */
      templateedite:{
        title:'模板编辑',
        visible:false,
        data:null
      },
      isediteTemplateName:false,
      userLevel:-1
    };
  },
  methods: {
    init(){
      // let user=JSON.parse(tool.getItem(window.lsKey.user));
      let self=this;
      api.getSitetemplateListOfOrg({templateType:1,campusId:this.$store.state.campusId}).then(function(d){
        // console.log(d)
        if(d.result=='操作成功'){
          self.phoneTemplateList=d.list;
        }
      });
    },
    campusChange : function(campusId) { //校区改变
      this.init();
    },
    /**根据角色权限限制操作 */
    disableOperationByRole() {
      switch (this._userInfo.roleMode) {
        //超级管理员
        case 0: {
        
          break;
        }
        //机构管理员
        case 1: {
          this.userLevel=1;
          break;
        }
        //校区管理员
        case 2: {
          this.userLevel=2;
          break;
        }
      }
      // console.log(this.userLevel)
    },
    tabshandleClick(tab, event){
      console.log(tab, event);
    },
    editeTemplate(){
      this.templateedite.visible=true;
    },
    selectTemplate(d){
      this.$emit('selectCallBack',d);
      this.parentData.visible=false;
      
    },
    editeTemplateName(){
      this.isediteTemplateName=true;
    },
    saveTemplateName(data){
      let self=this;
      let templateApplyName=data.templateApplyName;
      let templateApplyId=data.templateApplyId;
      // debugger
      api.alterTemplateName({
        templateApplyName:templateApplyName,
        templateApplyId:templateApplyId
      }).then(function(d){
        // debugger
        if(d.result=='操作成功'){
          self.$message({
            message: '修改成功',
            type: 'success'
          });
          self.isediteTemplateName=false;
        }
      });
      
    }
  },
  mounted() {
    this._userInfo = tool.getItem(lsKey.user, true); //得到当前用户信息
    this.disableOperationByRole();

	  this.init();
  },
  computed: {},
  watch: {},
  created: function() {}
};
</script>

<style lang="scss">
.ow_templateselect {
  .content-popup {
    // margin: 0.14rem auto;
    // min-width: 15.48rem;
    // width: 15.48rem;
    // padding: 0.2rem 0.32rem 0.2rem 0.32rem;
    // height: auto;
    // background: #fff;
    // border: 0.01rem solid #ededed;
    // border-radius: 0.1rem;
    // box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
	  // color: #333333;
    
    padding: 0 0.04rem 0.2rem 0.04rem;
		font-size: 0.16rem;
    .tabsControl{
      .el-tabs__item{
        font-size: 0.16rem !important;
      }
      .txt-top{

      }
      .box-select{
        margin-top: 0.16rem;
        width: 11.8rem;
        height: 4.9rem;
        overflow-y: hidden;
        overflow-x: auto;
        .box-scroll{
          height: 100%;
          width: auto;
          white-space: nowrap;
          .box-selectItem{
            // float: left;
            display:inline-block;
            margin-left: 0.16rem;
            height: 100%;
            width: 2.77rem;
            .box-item{
              height: 4.26rem;
              width: 2.77rem;
              overflow: hidden;
              background: #fff;
              border: 0.01rem solid #ededed;
              border-radius: 0.1rem;
              -webkit-box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
              box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
              .backItem{
                width: 100%;
                height: 100%;
                // background-color: rgb(33, 143, 245);
              }
              .row{
                margin-top: -0.35rem;
                width: 100%;
                display: flex;
                justify-content: space-between;
                .ischeckIco{
                  margin-left: 0.08rem;
                  font-weight: bold;
                  color: greenyellow;
                  font-size: 0.25rem;
                }
                .statisticTxt{
                  margin-right: 0.08rem;
                  color: white;
                  font-weight: bold;
                }
              }
              .row-edite{
                margin-top: -1.5rem;
                width: 100%;
                height: 0.5rem;
                line-height: 0.5rem;
                // background-color: rgba(0,0,0,0.3);
                text-align: center;
                display: none;
                .el-button{
                  padding: 0.09rem 0.15rem !important;
                }
              }
            }
            .box-item:hover .row-edite{
              display: block;
            }
            .templateName{
              display: block;
              width: 100%;
              text-align: center;
              font-weight: bold;
              font-size: 0.18rem;
            }
            .editeBtn:hover{
              cursor: pointer;
            }
            .templateCreateTime{
              display: block;
              width: 100%;
              text-align: center;
              font-size: 0.14rem;
            }
          }
          .box-selectItem:first-child{
            margin-left: 0;
          }
        }
        
      }
    }
  }
  // 滚动条
  .scrollbarstyle::-webkit-scrollbar {
    width: 0.05rem;
    height: 0.1rem;
  }
  .scrollbarstyle::-webkit-scrollbar-thumb {
    border-radius: 0.5rem;
    background: #BBBBBB;
  }
  .scrollbarstyle::-webkit-scrollbar-track {
    background: #F2F6FC;
  }
}
.ow_templateselectPopup{
  top: 0.81rem !important;
  left: 2.1rem !important;
  z-index: 30 !important;
  background-color: rgba(0,0,0,0.3);
  .el-dialog{
    width: 12.2rem;
    margin-top: 10vh !important;
    .el-dialog__title{
      font-size: 0.18rem;
      font-weight: bold;
    }
    .el-dialog__headerbtn{
      font-size: 0.25rem !important;
    }
  }
}
</style>